import React,{useState} from 'react'
import './index.scss'
import {  Search  } from 'react-vant'

export default function Searcher() {
  const [value, setValue] = useState('');
  return (
    <div className='search-box-wrapper'>
      <Search className='search-input'  value={value}  onChange={setValue} placeholder="请输入搜索关键词" />
      <div className="search-host-wrapper">
        <div className="font-header">
          热门搜索
        </div>
        <div className="font-content">
          <div>手绘插画</div>
          <div>绘画素描</div>
          <div>数字插画设计</div>
          <div>C语言</div>
          <div>MYSQL基础</div>
          <div>UI设计</div>
          <div>illustration插画</div>
          <div>PS软件基础</div>
        </div>
      </div>
      <div className="search-class-wrapper">
        <div className="font-header">
          分类
        </div>
        <div className="class-photo-wrapper">
          <div>
            <img src="/public/image/3.jpg" alt="" />
            <span>出国留学</span>
          </div>
          <div>
            <img src="/public/image/3.jpg" alt="" />
            <span>绘画·兴趣</span>
          </div>
          <div>
            <img src="/public/image/3.jpg" alt="" />
            <span>音乐·唱歌</span>
          </div>
          <div>
            <img src="/public/image/3.jpg" alt="" />
            <span>精品课</span>
          </div>
          <div>
            <img src="/public/image/3.jpg" alt="" />
            <span>自媒体</span>
          </div>
          <div>
            <img src="/public/image/3.jpg" alt="" />
            <span>英语·语言</span>
          </div>
          <div>
            <img src="/public/image/3.jpg" alt="" />
            <span>考研·考证</span>
          </div>
          <div>
            <img src="/public/image/3.jpg" alt="" />
            <span>设计·IT</span>
          </div>
        </div>
      </div>
    </div>
  )
}
